<template>
   <div>
      <el-dialog
         v-model="open"
         :title="title"
         width="40%"
         :close-on-click-modal="false"
         :before-close="handleClose"
         class="add-position-dialog"
      >
         <div class="form-container">
            <el-form
               :model="formData"
               :rules="rules"
               ref="formRef"
               label-width="120px"
            >
               <el-form-item
                  label="所属部门:"
                  prop="org_id"
               >
                  <el-select
                     disabled
                     v-model="formData.org_id"
                     placeholder="请选择"
                     style="width: 100%"
                  >
                     <el-option
                        v-for="item in tissueList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                     ></el-option>
                     <!-- 可以通过API获取部门列表 -->
                  </el-select>
               </el-form-item>

               <el-form-item
                  label="职位名称:"
                  prop="position_name"
               >
                  <el-input
                     v-model="formData.position_name"
                     placeholder="请输入"
                  ></el-input>
               </el-form-item>

               <el-form-item
                  label="职位级别:"
                  prop="position_level_id"
               >
                  <el-select
                     v-model="formData.position_level_id"
                     placeholder="请选择"
                     style="width: 100%"
                  >
                     <el-option
                        v-for="item in levelList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                     ></el-option>
                  </el-select>
               </el-form-item>

               <el-form-item
                  label="职位编号:"
                  prop="position_num"
               >
                  <el-input
                     v-model="formData.position_num"
                     placeholder="请输入"
                  ></el-input>
               </el-form-item>

               <el-form-item
                  label="描述说明:"
                  prop="content"
               >
                  <el-input
                     v-model="formData.content"
                     type="textarea"
                     :rows="5"
                     placeholder="请输入"
                     maxlength="100"
                     show-word-limit
                  ></el-input>
               </el-form-item>

               <!-- <el-form-item
                  label="职位状态:"
                  prop="status"
               >
                  <el-select
                     v-model="formData.status"
                     placeholder="请选择"
                     style="width: 100%"
                  >
                     <el-option
                        v-for="item in statusList"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                     ></el-option>
                  </el-select>
               </el-form-item> -->
            </el-form>
         </div>

         <template #footer>
            <div class="dialog-footer">
               <el-button @click="handleCancel">取消</el-button>
               <el-button
                  type="primary"
                  @click="handleSubmit"
                  >立即提交</el-button
               >
            </div>
         </template>
      </el-dialog>
   </div>
</template>

<script setup>
   import { ref, reactive, defineExpose, defineProps, defineEmits, onMounted } from "vue";
   import { ElMessage } from "element-plus";
   import api from "@/api/index.js";
   // 弹窗状态
   const open = ref(false);
   const title = ref("新增职位");
   const formRef = ref(null);

   // 表单数据
   let formData = reactive({
      org_id: "", //组织id
      position_level_id: "", //职位级别id
      position_name: "", //职位名称
      position_num: "", //职位编号
      content: "", //描述说明
      // status: "1", //职位状态，0禁用，1启用，默认启用
      id: "", // 职位ID，编辑时使用
   });

   // 表单验证规则
   const rules = reactive({
      org_id: [{ required: true, message: "请选择所属部门", trigger: "change" }],
      position_name: [{ required: true, message: "请输入职位名称", trigger: "blur" }],
      position_level_id: [{ required: true, message: "请选择职位级别", trigger: "change" }],
      position_num: [{ required: true, message: "请输入职位编号", trigger: "blur" }],
      content: [{ required: true, message: "请输入描述说明", trigger: "blur" }],
      // status: [{ required: true, message: "请选择职位状态", trigger: "change" }],
   });
   const props = defineProps({
      tissueList: {
         type: Array,
         default: () => [],
      },
      selectedNodeId: {
         type: String,
         default: "",
      },
   });

   // 定义组织列表
   const orgList = ref([]);

   // 递归处理数据，将树形结构转换为扁平结构
   const flattenOrgList = (data) => {
      if (!data || !Array.isArray(data)) return [];

      const result = [];

      const traverse = (items) => {
         items.forEach((item) => {
            if (item) {
               result.push({
                  id: item.id,
                  name: item.name,
               });
               if (item.children && item.children.length > 0) {
                  traverse(item.children);
               }
            }
         });
      };

      traverse(data);
      return result;
   };

   const tissueList = ref([]);
   console.log(props.tissueList, "部门列表");

   // 初始化部门列表
   const initTissueList = () => {
      console.log("初始化部门列表", props.tissueList);

      // 检查props.tissueList是否为有效数组
      if (!props.tissueList || !Array.isArray(props.tissueList)) {
         console.error("部门列表数据格式错误，应为数组：", props.tissueList);
         tissueList.value = [];
         return;
      }

      // 处理部门数据，将树形结构转换为扁平结构
      const flattenedList = flattenOrgList(props.tissueList);

      // 确保部门列表不为空
      if (flattenedList && flattenedList.length > 0) {
         // 检查是否有selectedNodeId，并且在flattenedList中能找到匹配项
         if (props.selectedNodeId) {
            const selectedNode = flattenedList.find((item) => String(item.id) === String(props.selectedNodeId));
            if (selectedNode) {
               // 如果找到匹配项，只展示这一项
               tissueList.value = [
                  {
                     label: selectedNode.name,
                     value: String(selectedNode.id),
                  },
               ];
               // 自动设置当前选中的部门
               formData.org_id = String(selectedNode.id);
               return;
            }
         }

         // 如果没有selectedNodeId或找不到匹配项，显示全部列表
         tissueList.value = flattenedList.map((item) => ({
            label: item.name,
            value: String(item.id), // 确保ID为字符串类型
         }));
      } else {
         // 部门列表为空，可以考虑通过API获取
         console.warn("部门列表为空");
         tissueList.value = [];
      }
   };
   // 职位详情
   const positionDetail = ref({});
   const getPositionDetail = async (data) => {
      try {
         const res = await api.authority.positionDetail({ id: data.id });
         if (res.code == 200) {
            // 填充表单数据
            Object.keys(formData).forEach((key) => {
               if (res.data[key] !== undefined) {
                  // 确保ID和状态等字段为字符串类型
                  if (key === "id" || key === "org_id" || key === "position_level_id") {
                     formData[key] = String(res.data[key]);
                  } else {
                     formData[key] = res.data[key];
                  }
               }
            });

            console.log("获取职位详情成功", formData);

            // 检查部门和职级是否存在于选项列表中
            checkSelectOptions();
         } else {
            ElMessage.error(res.msg || "获取职位详情失败");
         }
      } catch (error) {
         console.error("获取职位详情失败:", error);
         ElMessage.error("获取职位详情失败");
      }
   };
   let levelList = ref([]);
   // 获取职级列表
   const getLevelList = async () => {
      try {
         const res = await api.authority.getLevelList();
         if (res.code == 200) {
            // 检查 res.data 是否为数组
            if (Array.isArray(res.data.data)) {
               levelList.value = res.data.data.map((item) => ({
                  label: item.position_level_name,
                  value: String(item.id), // 确保ID为字符串类型
               }));
               console.log("职级列表获取成功", levelList.value);
            } else {
               // 如果 res.data.data 不是数组，可能是对象或其他格式
               console.error("获取职级列表数据格式错误:", res.data);
               levelList.value = []; // 设置为空数组
            }
         } else {
            console.error("获取职级列表失败:", res.msg);
            ElMessage.error(res.msg || "获取职级列表失败");
            levelList.value = []; // 设置为空数组
         }
      } catch (error) {
         console.error("获取职级列表出错:", error);
         ElMessage.error("获取职级列表出错，请重试");
         levelList.value = []; // 设置为空数组
      }
   };
   // 打开弹窗
   const openDialog = (data) => {
      open.value = true;

      // 重置表单
      resetForm();

      // 初始化部门列表
      initTissueList();

      // 获取职级列表
      getLevelList();

      if (data && data.id) {
         // 编辑模式
         title.value = "编辑职位";
         // 获取职位详情并填充表单
         getPositionDetail(data);
      } else {
         // 新增模式
         title.value = "新增职位";
      }
   };
   // 重置表单
   const resetForm = () => {
      if (formRef.value) {
         formRef.value.resetFields();
      }
      // 清空所有字段
      Object.keys(formData).forEach((key) => {
         formData[key] = "";
      });
      // 设置默认值
      // formData.status = ""; // 默认启用
   };

   // 关闭弹窗
   const handleClose = () => {
      open.value = false;
      resetForm();
   };

   // 取消
   const handleCancel = () => {
      open.value = false;
      resetForm();
   };

   // 提交表单
   const handleSubmit = () => {
      formRef.value.validate(async (valid) => {
         if (valid) {
            try {
               let res;
               // 确保所有数据为字符串类型
               const submitData = {};
               Object.keys(formData).forEach((key) => {
                  submitData[key] = String(formData[key]);
               });

               if (formData.id) {
                  // 编辑模式
                  res = await api.authority.editorialPosition(submitData);
                  if (res.code === 200) {
                     ElMessage.success("编辑成功");
                     open.value = false;
                     // 触发刷新事件
                     emit("refresh");
                  } else {
                     ElMessage.error(res.msg || "编辑失败");
                  }
               } else {
                  // 新增模式
                  res = await api.authority.addPosition(submitData);
                  if (res.code === 200) {
                     ElMessage.success("添加成功");
                     open.value = false;
                     // 触发刷新事件
                     emit("refresh");
                  } else {
                     ElMessage.error(res.msg || "添加失败");
                  }
               }

               // 成功后重置表单
               if (res.code === 200) {
                  resetForm();
               }
            } catch (error) {
               console.error("保存失败:", error);
               ElMessage.error("保存失败");
            }
         }
      });
   };

   // 职位状态选项
   // const statusList = ref([
   //    { label: "启用", value: "1" },
   //    { label: "禁用", value: "0" },
   // ]);

   // 定义事件
   const emit = defineEmits(["refresh"]);

   // 对外暴露方法
   defineExpose({
      openDialog,
   });

   // 检查选择框选项是否包含当前值
   const checkSelectOptions = () => {
      // 检查部门是否存在于选项中
      if (formData.org_id && tissueList.value.length > 0) {
         const orgExists = tissueList.value.some((item) => item.value === formData.org_id);
         if (!orgExists) {
            console.warn(`部门ID ${formData.org_id} 不在选项列表中`);
         }
      }

      // 检查职级是否存在于选项中
      if (formData.position_level_id && levelList.value.length > 0) {
         const levelExists = levelList.value.some((item) => item.value === formData.position_level_id);
         if (!levelExists) {
            console.warn(`职级ID ${formData.position_level_id} 不在选项列表中`);

            // 如果职级不在列表中，可以考虑重新获取职级列表
            getLevelList();
         }
      }
   };

   // 在组件挂载时预加载职级列表和部门列表
   onMounted(() => {
      getLevelList();
      initTissueList(); // 初始化部门列表
   });
</script>

<style scoped>
   .add-position-dialog :deep(.el-dialog__body) {
      padding: 20px 30px;
   }

   .form-container {
      width: 100%;
   }

   .dialog-footer {
      display: flex;
      justify-content: center;
      gap: 20px;
   }

   .dialog-footer .el-button {
      min-width: 100px;
   }
</style>
